<template>
  <div>
    <a-modal
      title="额外费用设置"
      :width="800"
      :confirm-loading="feeModalLoading"
      :mask-closable="false"
      :destroy-on-close="true"
      :visible="visible"
      @ok="onSaveFee()"
      @cancel="$emit('update:visible', false)"
    >
      <a-form layout="inline">
          <a-form-item style="width:100%,margin-bottom:10px" v-bind="formItemLayoutWithOutLabel" :labelCol="labelCol" :wrapperCol="wrapperCol" label="代采费用" hasFeedback>
             <a-table :columns="columns2" :data-source="other_pick_fee" :row-key="(r,i) => {return i}" :pagination="false" bordered>
            <div slot="name" slot-scope="scope">
              <a-input v-model="scope.name" style="width:100px;"></a-input>
            </div>
             <div slot="desc" slot-scope="scope">
              <a-input v-model="scope.desc" style="width:100px;"></a-input>
            </div>
            <div slot="price" slot-scope="scope">
              <a-input v-model="scope.price" style="width:100px;"></a-input>
            </div>
            <div slot="is_day" slot-scope="scope" hidden>
                <a-checkbox v-model="scope.is_day"  :checked="scope.is_day == 1" @change="CountChange('day', index, $event)">
                按天算
              </a-checkbox>
            </div>
            <div slot="is_weight" slot-scope="scope" hidden>
                <a-checkbox  v-model="scope.is_weight"  :checked="scope.is_weight == 1" @change="CountChange('weight', index, $event)">
                按重算
              </a-checkbox>
            </div>
            <div slot="is_free" slot-scope="scope" hidden>
                <a-checkbox  v-model="scope.is_free"  :checked="scope.is_free == 1" @change="CountChange('free', index, $event)">
                是否免费
              </a-checkbox>
            </div>
            <div slot="action" slot-scope="scope,record,$index">
              <a-button type="link" style="color:red" @click="PickFeeDel(scope,record,$index)">删除</a-button>
            </div>

          </a-table>
             
            <a-button type="dashed" style="width: 100%" @click="addPickFee">
              <a-icon type="plus" />
            </a-button>
          </a-form-item>
          <a-form-item v-bind="formItemLayoutWithOutLabel" :labelCol="labelCol" :wrapperCol="wrapperCol" label="保管费用" hasFeedback>
             <a-table :columns="columns1" :data-source="preserve_fee" :row-key="(r,i) => {return i}" :pagination="false" bordered>
            <div slot="name" slot-scope="scope">
              <a-input v-model="scope.name" style="width:100px;"></a-input>
            </div>
             <div slot="desc" slot-scope="scope">
              <a-input v-model="scope.desc" style="width:100px;"></a-input>
            </div>
            <div slot="price" slot-scope="scope">
              <a-input v-model="scope.price" style="width:100px;"></a-input>
            </div>
            <div slot="is_day" slot-scope="scope,record,$index">
                <a-checkbox   :checked="scope.is_day == 1" @change="CountChange('day', $index, $event)">
                按天算(单位：天)
              </a-checkbox>
            </div>
            <div slot="is_weight" slot-scope="scope,record,$index">
                <a-checkbox    :checked="scope.is_weight == 1" @change="CountChange('weight', $index, $event)">
                按重算(单位：斤)
              </a-checkbox>
            </div>
            <div slot="is_free" slot-scope="scope,record,$index">
                <a-checkbox   :checked="scope.is_free == 1" @change="CountChange('free', $index, $event)">
                免费
              </a-checkbox>
            </div>
            <div slot="action" slot-scope="scope,record,$index">
              <a-button type="link" style="color:red" @click="PreserveFeeDel(scope,record,$index)">删除</a-button>
            </div>

          </a-table>
             
            <a-button type="dashed" style="width: 100%" @click="addPreserveFee">
              <a-icon type="plus" />
            </a-button>
          </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>


import {
  setExtraFee,
} from '@/api/adopt/order'
const columns1 = [
  {
    title: '费用名称',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '费用描述',
    scopedSlots: { customRender: 'desc' },
  },
   {
    title: '费用金额',
    scopedSlots: { customRender: 'price' },
  },
   {
    title: '按天算',
    scopedSlots: { customRender: 'is_day' },
  },
   {
    title: '按重算',
    scopedSlots: { customRender: 'is_weight' },
  },
  {
    title: '免费寄存时间内是否免费',
    scopedSlots: { customRender: 'is_free' },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
  },
]
const columns2 = [
  {
    title: '费用名称',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '费用描述',
    scopedSlots: { customRender: 'desc' },
  },
   {
    title: '费用金额',
    scopedSlots: { customRender: 'price' },
  },
 
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    orderId: {
      type: String,
      default: '',
    },
    orderInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      feeModalLoading: false,
      other_pick_fee: [],
      columns1,
      preserve_fee: [],
      columns2,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
       console.log(this.orderInfo)
       if (this.orderInfo) {
          this.other_pick_fee = JSON.parse(this.orderInfo.other_pick_fee)
          this.preserve_fee = JSON.parse(this.orderInfo.preserve_fee)
       }
  },
  updated() {},
  methods: {
    removePickFee (index) {
      if (index !== -1) {
        this.other_pick_fee.splice(index, 1);
      }
    },
    addPickFee () {
    
      this.other_pick_fee = this.other_pick_fee ? this.other_pick_fee : []
      this.other_pick_fee.push({
        name: '',
        desc: '',
        price: '',
        is_day: 0,
        is_weight: 0,
        is_free: 0,
      });
    },
   CountChange (type,index, e) {
      if (type === 'day') {
        this.preserve_fee[index].is_day = e.target.checked ? 1 : 0
      }
      if (type === 'weight') {
        this.preserve_fee[index].is_weight = e.target.checked ? 1 : 0
      }
      if (type === 'free') {
        this.preserve_fee[index].is_free = e.target.checked ? 1 : 0
      }
    },
    removePreserveFee (index) {
      if (index !== -1) {
        this.preserve_fee.splice(index, 1);
      }
    },
    addPreserveFee () {
       this.preserve_fee = this.preserve_fee ? this.preserve_fee : []
       this.preserve_fee.push({
            name: '',
            desc: '',
            price: '',
            is_day: 0,
            is_weight: 0,
            is_free: 0,
          });
    },
    PickFeeDel(e,record,index) {
      this.other_pick_fee.splice(index,1)
    },
    PreserveFeeDel(e,record,index) {
      this.preserve_fee.splice(index,1)
    },
    onSaveFee() {
      var params = {
        order_id: this.orderId,
        other_pick_fee: JSON.stringify(this.other_pick_fee),
        preserve_fee: JSON.stringify(this.preserve_fee),
      }
      setExtraFee(params)
        .then((res) => {
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('设置成功')
            this.$emit('update:visible', false)
            this.$emit('onAfterClose')
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
  },
}
</script>

<style scoped>
</style>